<template>
  <view class="shop-list">
    <!--    tab核销-->
    <view class="tabbas_box u-flex">
      <view class="hkbox">
        <u-tabs :list="list"  bg-color="transparent" active-color="#FF8617"
                inactive-color="#888888" :is-scroll="false" :current="current" @change="change"></u-tabs>
      </view>
      <view class="uicon-more-circle" @click="shopMore">查看更多></view>
    </view>
    <u-line color="#F6F6F6"></u-line>
    <view class="shop-list-box" v-if="shopsLists.length>0">
      <view class="shop-list-item" v-for="(item,index) in [shopsLists[0]]" :key="index">
        <view class="shop-list-item-top" @click="lookBiTc(item)">
          <view class="shop-list-item-img">
            <image :src="packageimage(item.package_images)" mode="aspectFill"></image>
          </view>
          <view class="shop-list-item-right">
            <view class="shop-list-item-title ellipsis-one-line">{{item.shop_name}}</view>
            <view class="shop-list-item-subt ellipsis-two-line">{{item.tab_name}}</view>
            <!--<view class="shop-list-item-price">
              <text>活动价：</text>
              <text>￥</text>
              <text style="font-size: 40rpx;font-weight: bold">{{ toFixedTwo(item.price - item.rebate_amount) }}</text>
            </view>-->
          </view>
        </view>
        <view class="shop-list-item-bottom">
          <view class="shop-list-item-bottom-text">
            <text>实付金额</text>
            <text style="color: #FF7900">￥{{ toFixedTwo(item.price) }}</text>
          </view>
          <view class="shop-list-item-bottom-text">
            <text>下单时间</text>
            <text>{{item.create_time}}</text>
          </view>
          <view class="shop-list-item-bottom-text">
            <text style="width: 96rpx">笔记要求</text>
            <text class="nide-text ellipsis-one-line">{{item.activity_ask}}</text>
            <text @click="LookBiJiShow = true" style="color: #888888;position: absolute;right: 0;width: 64rpx">详情></text>
          </view>
          <!--  笔记详情-->
          <u-popup v-model="LookBiJiShow" mode="center" border-radius="14" width="80%">
            <view class="look-box" style="padding: 40rpx">
              <view class="Look-content" >{{item.activity_ask}}</view>
              <view @click="LookBiJiShow = false" class="Look-btn">
                <text >我知道了</text>
              </view>
            </view>
          </u-popup>
          <!--套餐详情弹窗-->
          <u-popup v-model="LookTaoCanShow" mode="bottom" border-radius="34">
            <view class="lookbiji_wrap">
              <view class="details_info3">
                <view class="title">套餐详情</view>
                <view class="list_info_wrap" v-if="TaoCanDetails.length != 0">
                  <view class="list_item" v-for="(itemg,indexg) in TaoCanDetails" :key="indexg">
                    <view class="fucai"><span></span>{{itemg.name}}</view>
                    <view class="zicai_wrap">
                      <view class="zicai u-flex" v-for="(items,indexs) in itemg.list" :key="indexs">
                        <view>{{items.name}}</view>
                        <view>（{{items.num || '0'}}份）</view>
                        <view>¥{{items.price || '0.00'}}</view>
                      </view>
                    </view>
                  </view>
                </view>
                <view v-else>
                  <u-empty text="暂无套餐" mode="favor" font-size="24" icon-size="60"></u-empty>
                </view>
              </view>
            </view>
          </u-popup>
        </view>
      </view>
    </view>
    <view class="shop-list-box no-data" v-if="shopsLists.length === 0">
      <image :src="`https://td.lszbg.com/public/uploads/code_shop/noData_bg.png`"></image>
      <view class="no-data-text">暂无数据</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "shop-list",
  props: {
    shopsLists: {
      type: Array,
      default: []
    },
    shop_id: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      current: 0,
      list: [{
        name: '待核销',
        id: 2
      }, {
        name: '已完成',
        id: 5
      }],
      LookBiJiShow: false,//笔记详情
      TaoCanDetails: [], // 套餐详情
      LookTaoCanShow: false, // 套餐详情弹窗
    }
  },
  methods: {
    //获取图片的第一张
    packageimage(data) {
      return data[0]
    },
    //取出两位小数
    toFixedTwo(val) {
      var str = Number(val).toFixed(2)
      return str;
    },
    change(res) {
      let that = this
      that.current = res.index;
      this.$emit('shopList', this.list[res.index].id)
    },
    //订单详情
    lookBiTc(data) {
      console.log('查看套餐', data);
      let that = this
      that.$api.GetOrderDetails({
        order_id: data.id
      }).then(res => {
        console.log('订单详情', res);
        that.LookTaoCanShow = true
        that.TaoCanDetails = res.data.result.package.goods
      });
    },
  //  跳转订单列表
    shopMore(){
      console.log('shop_id', this.shop_id)
      uni.navigateTo({
        url: '/subPackagePurse/order-list/order-list?&shop_id=' + this.shop_id
      })
    },
  },
}
</script>
<style scoped lang="scss">
  .shop-list {
    background-color: #ffffff;
    border-radius: 30rpx;
    padding: 0 30rpx 30rpx 30rpx;
    margin-bottom: 30rpx;
    .tabbas_box {
      position: relative;
      z-index: 2;
      padding: 20rpx 0;
      //border-bottom: 1px solid #F6F6F6;
      .hkbox {
        width: 60%;
        text-align: center;
      }
      .uicon-more-circle{
        position: absolute;
        right: 30rpx;
        color: #999999;
        font-size: 26rpx;
      }
    }

    .shop-list-box {
      width: 100%;
      .shop-list-item {
        padding: 30rpx 0 0 0;
        .shop-list-item-top {
          height: 180rpx;
          display: flex;
          margin-bottom: 20rpx;

          .shop-list-item-img {
            width: 180rpx;
            height: 180rpx;
            border-radius: 16rpx;
            overflow: hidden;
            border: 2rpx solid #F6F6F6;
            image {
              width: 100%;
              height: 100%;
            }
          }
          .shop-list-item-right {
            margin-left: 30rpx;
            flex: 1;
            .shop-list-item-title {
              font-size: 28rpx;
              color: #333333;
              line-height: 60rpx;

            }

            .shop-list-item-subt {
              font-size: 24rpx;
              color: #888888;
              line-height: 40rpx;
            }
            .shop-list-item-price {
              color: #FF7900;
              line-height: 50rpx;
            }
          }
        }
        .shop-list-item-bottom{
          background: #F7F7F7;
          padding: 20rpx;
          border-radius: 12rpx;
          //margin-bottom: 30rpx;
          .shop-list-item-bottom-text {
            position: relative;
            line-height: 50rpx;
            font-size: 24rpx;
            display: flex;
            text {
              //display: inline-block;
            }
            .nide-text {
              color: #888888;
              font-size: 24rpx;
              line-height: 50rpx;
              width: calc(100% - 200rpx);
              height: 50rpx;
            }
            text:first-child{
              margin-right: 20rpx;
            }
          }
          //套餐详情
          .lookbiji_wrap {
            padding: 30rpx;
            background-color: #F4F4F4;

            .popup_title {
              font-weight: bold;
              font-size: 34rpx;
              text-align: center;
            }

            .loobbiji_info {
              .url_wrap {
                background-color: #ffffff;
                padding: 24rpx;
                margin: 24rpx auto;
                border-radius: 24rpx;

                .lookbiji_url {
                  align-items: center;
                  justify-content: space-between;

                  view:nth-child(1) {
                    font-weight: bold;
                    font-size: 32rpx;

                    span {
                      font-size: 26rpx;
                      font-weight: initial;
                      color: #666666;
                    }
                  }

                  view:nth-child(2) {
                    background-color: #FF4E0D;
                    border-radius: 200rpx;
                    color: #ffffff;
                    width: 120rpx;
                    height: 56rpx;
                    line-height: 56rpx;
                    text-align: center;
                  }
                }

                .url_address {
                  color: #f00;
                  margin-top: 12rpx;
                  text-decoration: underline;
                }
              }

              .bijijietu {
                background-color: #ffffff;
                padding: 20rpx 10rpx;
                border-radius: 24rpx;

                .bjjttitle {
                  font-size: 32rpx;
                  font-weight: bold;
                  padding: 14rpx 10rpx 10rpx 10rpx;
                }

                .demo-layout {
                  margin-top: 20rpx;

                  image {
                    width: 100%;
                    height: 200rpx;
                    border-radius: 20rpx;
                  }
                }
              }
            }
          }
          .details_info3 {
            padding: 32rpx 28rpx;
            background-color: #ffffff;
            border-radius: 28rpx;
            margin: 30rpx 0;

            .title {
              font-size: 30rpx;
              color: #333;
              font-weight: bold;
              width: 200rpx;
              height: 54rpx;
              margin-bottom: 28rpx;
            }

            .list_info_wrap {
              align-items: center;
              padding: 0 22rpx 0 22rpx;
              margin-top: 20rpx;

              .list_tile {
                color: #333;
                font-weight: bold;
                font-size: 28rpx;
                align-items: center;

                span {
                  display: inline-block;
                  width: 6rpx;
                  height: 6rpx;
                  border-radius: 200rpx;
                  background-color: #999;
                  margin-right: 10rpx;
                }
              }

              .list_item {
                align-items: flex-start;
                margin-top: 20rpx;
                padding-left: 0;

                .fucai {
                  font-size: 28rpx;
                  color: #333;
                  flex: 1;
                  font-weight: bold;

                  span {
                    display: inline-block;
                    width: 10rpx;
                    height: 10rpx;
                    background-color: #d4d4d4;
                    border-radius: 200rpx;
                    margin-right: 14rpx;
                  }
                }

                .zicai_wrap {
                  padding-left: 22rpx;
                }

                .zicai {
                  margin-top: 12rpx;

                  view:nth-child(1) {
                    font-size: 28rpx;
                    color: #666;
                    flex: 1;
                  }

                  view:nth-child(2) {
                    font-size: 28rpx;
                    color: #666;
                    margin-left: auto;
                  }

                  view:nth-child(3) {
                    font-size: 28rpx;
                    color: #666;
                    font-weight: bold;
                    margin-left: auto;
                  }
                }
              }
            }
          }
          //  笔记要求详情css
          .look-box{
            padding: 40rpx;
            .Look-content{
              font-size: 28rpx;
              color: #3D3D3D;
              line-height: 56rpx;
              text-align: center;
            }
            .Look-btn{
              margin-top: 40rpx;
              background: linear-gradient( 104deg, #F18F2C 0%, #FF7A00 100%);
              border-radius: 50rpx;
              padding: 20rpx 0;
              text-align: center;
              text{
                font-size: 28rpx;
                color: #FFFFFF;
                text-align: center;
              }
            }
          }
        }
      }

    }
    .no-data {
      text-align: center;
      padding: 50rpx 0;
      .no-data-text {
        font-size: 28rpx;
        color: #999999;
        line-height: 50rpx;
      }
      image {
        width: 200rpx;
        height: 200rpx;
      }
    }
  }
</style>